<template>
    <div id="apo">
        <!--头部搜索-->
        <div class="tou">
            <div>
                <div>
                    <img src="" alt="">
                    <span>云课堂</span>
                </div>
                <div class="diva"><a href="javascript:;">App查看</a></div>
            </div>
            <div>
                <div  class="input">
                    <div><router-link to="/search_for_details"><img src="../../../static/images/sousuo.png" alt=""></router-link></div>
                </div>
            </div>

        </div>

        <!--轮播-->  <!--mint-ui-->
        <div class="lunbo">
            <mt-swipe :auto="4000">
                <mt-swipe-item>1</mt-swipe-item>
                <mt-swipe-item>2</mt-swipe-item>
                <mt-swipe-item>3</mt-swipe-item>
                <mt-swipe-item>4</mt-swipe-item>
                <mt-swipe-item>5</mt-swipe-item>
                <mt-swipe-item>6</mt-swipe-item>
            </mt-swipe>
        </div>

        <!--九宫格--> <!-- nui-->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <!--<span class="mui-icon mui-icon-home"></span>-->
                    <div class="imgd"><img src="../../../static/images/index_s/fbbf1cfc-45f2-4a42-bcbb-df5cad63d3c2.png" alt=""></div>
                    <div class="mui-media-body">微专业</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <div class="imgd"><img src="../../../static/images/index_s/df290b12-6caa-44b5-a3a5-f38b21c89b19.png" alt=""></div>
                    <div class="mui-media-body">办公效率</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <div class="imgd"><img src="../../../static/images/index_s/78fdd2e4-27ba-4411-9f2b-81313daa1c04.png" alt=""></div>
                    <div class="mui-media-body">职业岗位</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <div class="imgd"><img src="../../../static/images/index_s/23444883-fc1a-4972-8a22-591e5b790ee0.png" alt=""></div>
                    <div class="mui-media-body">职场发展</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <div class="imgd"><img src="../../../static/images/index_s/b216231d-4b93-4d5c-8e7c-e22389f194b8.png" alt=""></div>
                    <div class="mui-media-body">IT互联网</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <div class="imgd"><img src="../../../static/images/index_s/38fc67bc-604b-4dcd-a0ba-9010a684e9ac.png" alt=""></div>
                    <div class="mui-media-body">金融财会</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <div class="imgd"><img src="../../../static/images/index_s/9168b7be-f764-4aad-9861-ba94826fad6d.png" alt=""></div>
                    <div class="mui-media-body">语言留学</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <div class="imgd"><img src="../../../static/images/index_s/1fec62a9-6daf-431e-9b1c-d79c8cba737e.png" alt=""></div>
                    <div class="mui-media-body">更多课程</div></a></li>
            </ul>
        </div>

      <!--  <div v-for="item in list">
            <img :src="item.img_url" alt="">
        </div>-->
        <!--畅销好课-->
        <div class="yiji">
            <div class="titl">畅销好课</div>
            <div class="canxiao">
                <div class="tps" v-for="item in list1">
                    <router-link v-bind="{to:'/details/'+item.id}"> <!--to="/details"-->
                        <div><img :src="item.img_url" alt=""></div>
                        <div>
                            <div>{{item.class_title}}</div>
                            <div><span>{{item.price}}</span><span></span></div>
                        </div>
                    </router-link>
                </div>
            </div>
        </div >
        <!--专题-->
        <div class="yiji zhuangti">
            <div class="titl">专题</div>
            <div v-for="item in list2">
                <div><img :src="item.img_url" alt=""></div>
            </div>
        </div>
        <!--办公效率-->
        <div class="yiji">
            <div class="titl">办公效率</div>
            <div class="xiaolv canxiao">
                <div v-for="item in list3">
                    <div><img :src="item.img_url" alt=""></div>
                    <div>
                        <div>{{item.class_title}}</div>
                        <div><span>{{item.price}}</span><span></span></div>
                    </div>
                </div>
            </div>
        </div>
        <!--职场发展-->
        <div class="yiji">
            <div class="titl">职场发展</div>
            <div class="xiaolv canxiao">
                <div v-for="item in list4">
                    <div><img :src="item.img_url" alt=""></div>
                    <div>
                        <div>{{item.class_title}}</div>
                        <div><span>{{item.price}}</span><span></span></div>
                    </div>
                </div>
            </div>

        </div>
        <!--语言留学-->
        <div class="yiji yuy">
            <div class="titl">语言留学</div>
            <div v-for="item in list5">
                <div><img :src="item.img_url" alt=""></div>
            </div>
        </div>
        <!--金融财会-->
        <div class="yiji yuy">
            <div class="titl">金融财会</div>
            <div v-for="item in list6">
                <div><img :src="item.img_url" alt=""></div>
            </div>
        </div>
        <!--职场之外-->
        <div class="yiji yuy">
            <div class="titl">职场之外</div>
            <div v-for="item in list7">
                <div><img :src="item.img_url" alt=""></div>
            </div>
        </div>

    </div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
                list:[],
                list1:[],
                list2:[],
                list3:[],
                list4:[],
                list5:[],
                list6:[],
                list7:[]
            }
		},
        created(){
		    this.postshuju();
        },
		methods: {
            postshuju:function () {
                //vue-rescource
               /* var url = "http://134.175.237.162/index.php/info/searchCourse";
                this.$http.post(url,{keyword:true},{emulateJSON:true}).then(function (response) {
                    console.log(response.body)
                })*/

                this.$ajax({
                    method:'post',
                    url:'http://134.175.237.162/index.php/info/searchCourse',
                }).then((res)=>{
                    if(res.data.code==0){
                        this.list = res.data.data.data;
                       /* console.log(this.lis,res)
                        console.log(this.lis)*/
                        var ar1 = new Array();
                        var ar2 = new Array();
                        var ar3 = new Array();
                        var ar4 = new Array();
                        var ar5 = new Array();
                        var ar6 = new Array();
                        var ar7 = new Array();
                        for(var i=0;i<this.list.length;i++){
                            // 畅销好课
                            if(this.list[i].classify_id == 1){
                                ar1.push(this.list[i])
                            }
                            // 专题
                            if(this.list[i].classify_id == 2){
                                ar2.push(this.list[i])
                            }
                            // 办公效率
                            if(this.list[i].classify_id == 3){
                                ar3.push(this.list[i])
                            }
                            // 职场发展
                            if(this.list[i].classify_id == 4){
                                ar4.push(this.list[i])
                            }
                            // 语言留学
                            if(this.list[i].classify_id == 5){
                                ar5.push(this.list[i])
                            }
                            // 金融财会
                            if(this.list[i].classify_id == 6){
                                ar6.push(this.list[i])
                            }
                            // 职场之外
                            if(this.list[i].classify_id == 7){
                                ar7.push(this.list[i])
                            }
                        }
                        this.list1 = ar1;
                        this.list2 = ar2;
                        this.list3 = ar3;
                        this.list4 = ar4;
                        this.list5 = ar5;
                        this.list6 = ar6;
                        this.list7 = ar7;
                    }else{
                        console.log('请求异常')
                    }
                    //console.log(res.data.data.data)
                }).catch(()=>{
                    console.log('网络异常')
                })
             /*   let param= new URLSearchParams();//为发送的数据转换格式
                param.append("course_id",true);
                this.$ajax({
                    method:'post',
                    url:'http://134.175.237.162/index.php/Index/getClassDetails',
                    data:param
                }).then((res)=>{
                    if(res.data.code==1){
                        this.list = res.data.data.data;
                        console.log(this.lis,res)

                    }else{
                        console.log('请求异常')
                    }
                    console.log(res.data.data.data)
                }).catch(()=>{
                    console.log('网络异常')
                })*/


            }
		}
	}
</script>

<style scoped>
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-right: none;
        border-bottom: none;
    }
    .mui-grid-view.mui-grid-9{
        border-top: none;
        border-left: none;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        padding: 0;
    }
    .mui-content,.mui-grid-view.mui-grid-9{background-color: white}
    .mui-content > .mui-table-view:first-child{margin-top:0}
    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
        padding:0;
        font-size: 12px;
    }
    .mui-col-xs-4{width: 25%;}
    .input{
       text-align: right}
    .input img{width: 18px}
    .tou{
        padding: 10px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        background-color: white}
    .tou>div{flex:1}
    .tou>div:first-child{
        font-size: 16px;
        display: flex;
    }
    .tou>div:first-child span{margin-right: 10px}
    .diva{
        padding: 0 2px;
        border-radius:10px;
        height: 21px;
        border:1px solid #2CC17B;
    }
    .diva>a{color:#2CC17B;font-size: 10px}
    .xiaolv>div:first-child{width: 100%}
    .yiji{
        box-sizing: border-box;
        padding: 10px;
        background-color:white;
        margin-bottom: 10px;
    }
    .yuy img{width: 100%}
    .canxiao{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .canxiao>div{width: 47%}
    .canxiao>div img{width: 100%}

    .imgd{
        margin: auto;
        width: 49px;
        height:49px;
    }
    .imgd>img{width: 100%}
    .zhuangti>div{margin-bottom: 10px}
    .zhuangti>div img{width: 100%}
    .titl{color:black;font-weight:bold;margin-bottom: 10px}
    #apo{padding-bottom: 50px;color: black}
    .lunbo{
        height: 160px;
    }
</style>
